import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12


Rectangle {

    id: root
    readonly property real dp: config.dp
    property int columnCount: 4
    property int rowCount: 4

    property int rowHeight: 40*dp

    property var title: ["FAM", "ROW", "VIC", "CY5"]
    property var title2: []
    property bool doubleTitle: false  // 两行表头
    property string titleColor: "#F7F8FA"

    property var tabledata: []

    Component.onCompleted: {
        setData(tabledata)
    }

    function setData(data){
        dataModel.clear()
        tabledata = data
        for(let i = 0; i < data.length; i ++){
            dataModel.append({
                             "lineIdx": i
                             })
        }
        columnCount = title.length
        rowCount = data.length

    }

    signal released()


    anchors.fill: parent

    color: "white"
    clip: true



    ListView{
        id: tableView
        width: parent.width
        height: parent.height - rowHeight*(doubleTitle? 2:1.25)
        y: rowHeight * (doubleTitle? 2:1.25)
        model: dataModel
        delegate: lineDelegate
        spacing: 1
        move: Transition {
        }
        ScrollBar.vertical: ScrollBar{}

    }

    ListModel{
        id: dataModel
    }



    Component{
        id: lineDelegate
        // 行模型
        Rectangle{
            property int idx: lineIdx
            height: rowHeight
            width: root.width
            Repeater{
                model: columnCount
                // 列元素
                Item{
                    width: root.width / columnCount
                    x: root.width / columnCount * index
                    height: rowHeight
                    Text{
                        anchors.centerIn: parent
                        font.pixelSize: config.fontsize
                        text: tabledata[idx][index]
                    }

                }

            }
            CustomBorder{
                bBorderwidth: 1
                borderColor: "#EFEFEF"
            }
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    parent.color = "#F2F9FF"
                }onExited: {
                    parent.color = "white"
                }onReleased: {
                    console.log("点击行" + lineIdx)
                }
            }

        }

    }

    Rectangle{      // 表头
        width: parent.width
        height: rowHeight * (doubleTitle?2:1.25)
        color: titleColor
        Repeater{
            model: columnCount
            Item{
                width: root.width / columnCount
                x: root.width / columnCount * index
                height: doubleTitle ? rowHeight : rowHeight*1.25
                Text{
                    text: title[index]
                    font.pixelSize: config.fontsize
                    anchors.centerIn: parent
                    horizontalAlignment: Text.AlignHCenter
                    anchors.verticalCenterOffset: doubleTitle ? (title2[index]==="" ? rowHeight*0.4 : 0) : 0
//                    y: doubleTitle ? (title2[index]==="" ? rowHeight*0.75 : rowHeight*0.35) : rowHeight*0.35
                }
            }
        }
        Repeater{
            model: columnCount
            Item{
                width: root.width / columnCount
                x: root.width / columnCount * index
                height: doubleTitle ? rowHeight : rowHeight*1.25
                y: doubleTitle ? rowHeight : rowHeight*1.25
                Text{
                    anchors.centerIn: parent
                    text: title2[index]
                    font.pixelSize: config.fontsize
                }
                visible: doubleTitle
            }
        }
        MouseArea{
            anchors.fill: parent
            onReleased: {
                root.released()
            }
        }
    }


}
